<template>
    <div class="addSpecialTableItem">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" :inline="false">
            <el-row :gutter="32">
                <el-col :span="6" :offset="0" class="FormItem">
                    <el-form-item label="选择球队" prop="cardTeamId">
                        <el-select v-model="form.cardTeamId" placeholder="请选择球队" clearable filterable
                            @change="getPlayerByTeam">
                            <el-option v-for="item in props.teamList" :key="item.cardTeamId"
                                :label="item.teamChineseName" :value="item.cardTeamId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="0" class="FormItem">
                    <el-form-item label="选择球员" prop="cardPlayerId">
                        <el-select v-model="form.cardPlayerId" placeholder="请选择球员" clearable filterable
                            @change="getCardMIByPlayer">
                            <el-option v-for="item in playerList" :key="item.id"
                                :label="item.playerChineseName"
                                :value="item.cardPlayerId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="15" :offset="0" class="FormItem">
                    <el-form-item label="选择卡密" prop="winCarmiId" >
                        <el-select v-model="form.winCarmiId" placeholder="请选择卡密" @change="getCarmiInfo" >
                            <el-option v-for="item in cardMilist" :key="item.id" :label="item.carmiInfo"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="15" :offset="0" class="FormItem">
                    <el-form-item label="特殊内容" prop="winCarmiDescribe">
                        <el-input v-model="form.winCarmiDescribe" type="textarea" :rows="1"
                            placeholder="请输入特殊卡密内容(不输入默认球员中文名)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="0" class="FormItem">
                  <el-form-item label="卡密颜色" prop="carmiColor">
                    <el-select v-model="form.carmiColor" placeholder="请选择特殊卡密颜色" clearable filterable>
                      <el-option v-for="item in special_colour" :key="item.value" :label="item.label"
                                 :value="item.value">
                        <span :style="'color: ' + item.value">{{ item.label }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-popconfirm title="确定要删除特殊卡密吗？" icon-color="red" @confirm="carmiListHandle()">
                        <template #reference>
                            <el-button type="danger" icon="delete" circle ></el-button>
                        </template>
                    </el-popconfirm>
                </el-col>
            </el-row>
        </el-form>

    </div>
</template>
<script lang='ts' setup>
const { proxy } = getCurrentInstance()
const { special_colour } = toRefs<any>(proxy?.useDict('special_colour'));
import { getCarmiGroupByType } from '@/api/workflow/category/index'
import { TeamListItem } from '@/api/workflow/category/types';
interface FormType {
    id?: any;
    cardCollageId?: any;
    cardCollageCode?: any;
    carmiColor?: any;
    winCarmiId?: any;
    winCarmiDescribe?: any;
    cardTeamId?: any;
    carmiProperty?: any;
    carmiInfo?: any;
    cardPlayerId?: any;
}

const emit = defineEmits(['del'])
const cardCategoryId = ref()
const props = defineProps({
    cardCategoryId: {
        type: [String, Number],
        default: ''
    },
    teamList: {
        type: Array as PropType<TeamListItem[]>,
        default: () => []
    },
    itemInfo: {
        type: Object as PropType<FormType>,
        default: () => ({
            id: undefined,
            cardCollageId: undefined, //拼团id
            cardCollageCode: undefined, //拼团编码
            carmiColor: undefined, //卡密颜色
            winCarmiId: undefined, //特殊卡密
            winCarmiDescribe: undefined, //特殊卡密描述
            cardTeamId: undefined, //球队id
            carmiProperty: undefined, //卡密属性
            carmiInfo: undefined, //卡密属性
            cardPlayerId: undefined //球员id
        })
    }
})
watch(() => props.itemInfo, (val) => {
    form.value = { ...data.form, ...val };
})
watch(() => props.cardCategoryId, (val) => {
    cardCategoryId.value = props.cardCategoryId

}, {
    deep: true,
    immediate: true,
})

const data = reactive({
    form: {
        id: undefined,
        cardCollageId: undefined, //拼团id
        cardCollageCode: undefined, //拼团编码
        carmiColor: undefined, //卡密颜色
        winCarmiId: undefined, //特殊卡密
        winCarmiDescribe: undefined, //特殊卡密描述
        cardTeamId: undefined, //球队id
        carmiProperty: undefined, //卡密属性
        carmiInfo: undefined, //卡密属性
        cardPlayerId: undefined //球员id
    },
    rules: {
        cardTeamId: [
            { required: true, message: '请选择球队', trigger: 'blur' }
        ],
        cardPlayerId: [
            { required: true, message: '请选择球员', trigger: 'blur' }
        ],
        winCarmiId: [
            { required: true, message: '请选择卡密', trigger: 'blur' }
        ],
        carmiColor: [
            { required: true, message: '请选择卡密颜色', trigger: 'blur' }
        ],
    },
})

const { form, rules } = toRefs(data)
const formRef = ref()
const playerList = ref<any>([])
const cardMilist = ref<any>([])





const carmiListHandle = () => {
    emit('del',)
}
const getPlayerByTeam = () => {
    if (form.value.cardTeamId == '' || form.value.cardTeamId == null || form.value.cardTeamId == undefined) {
        form.value.cardPlayerId = undefined
        form.value.winCarmiId = undefined
        playerList.value = []
        cardMilist.value = []
        return
    }
    console.log(cardCategoryId.value);
    const query = {
        cardCategoryId: cardCategoryId.value,
        type: 2,
        cardTeamId: form.value.cardTeamId,
    }
    getCarmiGroupByType(query).then(res => {
        playerList.value = res.data
    })
}
const getCardMIByPlayer = () => {
    if (form.value.cardPlayerId == '' || form.value.cardPlayerId == null || form.value.cardPlayerId == undefined) {
        form.value.winCarmiId = undefined
        cardMilist.value = []
        return
    }
    const query = {
        cardCategoryId: cardCategoryId.value,
        type: 3,
        cardTeamId: form.value.cardTeamId,
        playerId: form.value.cardPlayerId
    }
    getCarmiGroupByType(query).then(res => {
        cardMilist.value = res.data
    })
}
const getCarmiInfo = () => {
    let row = cardMilist.value.find((item: any) => {
        return item.id == form.value.winCarmiId
    })
    form.value.winCarmiDescribe = row.playerChineseName
    form.value.carmiProperty = row.cardCategoryProperty
    form.value.carmiInfo = row.carmiInfo
}
defineExpose(
    {
        formRef,
        form,
    }
)

</script>
<style lang="scss" scoped>
.FormItem {
    margin-bottom: 20px;
}
</style>
